<script setup>
import { SmileOutlined, FieldTimeOutlined, BellOutlined, PictureOutlined } from '@ant-design/icons-vue';
import { ref, defineEmits,defineProps} from 'vue';
import ResumeModal from './ResumeModal.vue'
import {sendMessage} from "@/api/message.js";
import {message} from 'ant-design-vue'
import {userUserStore} from "@/stores/modules/user.js";
import {messageStore} from "@/stores/modules/messageStore.js";
import ApplyJob from "@/components/ApplyJob.vue";

const props = defineProps({
  sessionId: {
    type: String,
    required: true
  },
  jobInfo: Object,
  nowRole: String
})

const emit = defineEmits(['message-sent']); // 定义自定义事件

const messageInput = ref('')
// 控制组件显示
const isLoading = ref(false);  // 控制加载状态

// 控制显示简历弹框的状态
const isResumeModalVisible = ref(false);
const isApplyJobVisible = ref(false)

// 弹框点击发简历后，触发展示简历页面
const handleExportResume = () => {
  isResumeModalVisible.value = true;
  // 调用获取简历列表的功能
};

const handlerApplyJobs = () =>{
  isApplyJobVisible.value = true
}

const handleExchangePhone = async () => {
  if(!userUserStore().userInfo.phone) return message.error('还没有手机号')
  messageInput.value = '我的手机号：'+userUserStore().userInfo.phone
  await handleSendMessage()
  emit('message-sent'); // 触发自定义事件
}

const handleExchangeWechatNum = async () =>{
  if(!userUserStore().userInfo.phone) return message.error('还没有微信号')
  messageInput.value = '我的微信号：'+userUserStore().userInfo.wechatNum
  console.log(userUserStore().userInfo)
  await handleSendMessage()
  emit('message-sent');
}

const handleKeydown = (e) => {
  if (e.shiftKey) {
    addNewLine(); // Shift+Enter 换行
  } else {
    handleSendMessage(); // Enter 发送消息
  }
};

const handleSendMessage = async () => {
  if(messageInput.value.trim() === '') return message.error('输入不能为空')
  try {
    const res = await sendMessage({
      chatSessionId: props.sessionId,
      content: messageInput.value
    })
    if(res.data.code === 200){
      messageInput.value = ''; // 清空输入框
      emit('message-sent', res.data); // 触发自定义事件
    }else {
      throw new Error('发送失败');
    }
  }catch {
    message.error('发送失败')
  }
};

const handlePdfSent = async (file) =>{
  console.log(file)
  try {
    const res = await sendMessage({
      chatSessionId: props.sessionId,
      content: file
    })
    if(res.data.code === 200){
      emit('message-sent', res.data); // 触发自定义事件
    }else {
      throw new Error('发送失败');
    }
  }catch {
    message.error('发送失败')
  }
}

const addNewLine = () => {
  messageInput.value += '\n';
}

</script>

<template>
  <div class="message-input-container">
    <!-- 工具栏图标 -->
    <div class="toolbar">
      <!--      <SmileOutlined class="icon" />-->
      <!--      <FieldTimeOutlined class="icon" />-->
      <!--      <BellOutlined class="icon" />-->
      <!--      <PictureOutlined class="icon" />-->
      <!--      <div class="divider"></div>-->
      <a-space class="button-container">
        <a-button size="small"
                  style="color: #9999a6"
                  @click="handlerApplyJobs">
          申请岗位
        </a-button>
        <a-button
            v-if="nowRole === 'student'"
            size="small"
            style="color: #9999a6"
            @click="handleExportResume"
            @update:isResumeModalVisible="isResumeModalVisible = $event"
            v-model:isResumeModalVisible="isResumeModalVisible">
          发简历</a-button>
        <a-button size="small" style="color: #9999a6" @click="handleExchangePhone">换电话</a-button>
        <a-button size="small" style="color: #9999a6" @click="handleExchangeWechatNum">换微信</a-button>
      </a-space>
    </div>

    <!-- 输入框 -->
    <textarea v-model="messageInput" class="input-field" placeholder="请输入消息..."
              @keydown.enter.prevent="handleKeydown"></textarea>

    <!-- 发送按钮 -->
    <div class="send-info">
      <span class="hint">按Enter键发送，按Shift+Enter键换行</span>
      <a-button size="small" type="primary" @click="handleSendMessage" :disabled="!messageInput.trim()">发送</a-button>
    </div>

    <!-- 显示加载状态 -->
    <a-spin v-if="isLoading" tip="正在导出简历...">
      <div style="height: 200px;"></div>
    </a-spin>

    <!-- 简历弹框 -->
    <ResumeModal v-if="nowRole === 'student'" v-model:open="isResumeModalVisible" @pdf-sent="handlePdfSent"/>
    <ApplyJob v-model:open="isApplyJobVisible" :job-info="jobInfo"></ApplyJob>

  </div>
</template>

<style scoped>
.message-input-container {
  border-top: 1px solid #e0e0e0;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.icon {
  font-size: 22px;
  margin-right: 16px;
  cursor: pointer;
  color: #7e7e7e;
}

.divider {
  border-left: 1px solid #e0e0e0;
  height: 20px;
  margin: 0 10px;
}

.button-container {
  margin: 0 10px;
}

.input-field {
  width: 100%;
  height: 75px;
  resize: none;
  border: 0;
  border-radius: 5px;
  margin-bottom: 5px;
  font-size: 14px;
  outline: none;
  white-space: pre-wrap;
}

.send-info {
  transform: translateY(10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hint {
  color: #999;
  font-size: 12px;
}
</style>
